<section class="content-header">
  <h1>
    项目
    <small>Project panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-flag"></i> 主页</a></li>
    <li class="active">项目</li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <section class="col-lg-12 connectedSortable">
      <!-- Custom tabs (Charts with tabs)-->
      <div class="nav-tabs-custom">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="javascript:void(0)" data-target="#project-info" data-toggle="tab">详细信息</a></li>
          <li><a href="javascript:void(0)" data-target="#project-config" data-toggle="tab">项目配置</a></li>
          <li><a href="javascript:void(0)" data-target="#project-templates" data-toggle="tab">模板列表</a></li>
          <!-- <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li> -->
        </ul>
        <div class="tab-content ">
          <!-- 详细信息 -->
          <div class="tab-pane active" id="project-info" style="position: relative;" ng-controller="projectInfoCtrl">
            <!-- <div class="tool" style='margin-bottom: 15px'>
              <a href='javascript:void(0)'>运行情况</a>
              <a href='javascript:void(0)'>采集结果</a>
              <a href='javascript:void(0)'>发出请求</a>
              <a href='javascript:void(0)'>日志</a>
              <a href='javascript:void(0)'>状态</a>
            </div> -->
            <div class='btn-group' style='margin-bottom:15px'>
              <button class='btn btn-default btn-sm' ng-click="changeDiv('chart')">运行情况</button>
              <button class='btn btn-default btn-sm' ng-click="changeDiv('result')">采集结果</button>
              <button class='btn btn-default btn-sm' ng-click="changeDiv('request')">发出请求</button>
              <button class='btn btn-default btn-sm' ng-click="changeDiv('log')">查看日志</button>
              <button class='btn btn-default btn-sm' ng-click="changeDiv('status')">查看状态</button>
            </div>

            <!-- 运行状态 -->
            <div ng-show='type=="chart"'>
              <div id="statusChart" style="width: 100%;height:400px;"></div>
            </div>

            <!-- 采集结果 -->
            <div ng-show='type=="result"'>
              采集结果
            </div>

            <!-- 发出请求 -->
            <div ng-show='type=="request"'>
              <div class='box' ng-repeat='r in projectRequest'>
                <div class='box-header'>
                  <h5 class='box-title'>请求{{$index}}</h5>
                  <div class="box-tools">
                    <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                    </button>
                  </div>
                </div>
                <div class='box-body no-padding'>
                  <table class='table table-condensed'>
                    <tr>
                      <th>
                        主体
                      </th>
                      <td>
                        {{r.body}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        持续期间
                      </th>
                      <td>
                        {{r.duration}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        指纹
                      </th>
                      <td>
                        {{r.fingerprint}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        采集结果
                      </th>
                      <td>
                        {{r.items}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        请求方式
                      </th>
                      <td>
                        {{r.httpMethod}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        响应数据大小
                      </th>
                      <td>
                        {{r.responseSize}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        http状态
                      </th>
                      <td>
                        {{r.httpStatus}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        发出请求时间
                      </th>
                      <td>
                        {{r.time}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        url
                      </th>
                      <td>
                        {{r.url}}
                      </td>
                    </tr>
                    <tr>
                      <th>
                        cookies
                      </th>
                      <td>
                        {{r.cookies || '无'}}
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>

            <!-- 日志 -->
            <div ng-show='type=="log"'>
              <div class="box">
                <div class="box-header">
                  <h5 class="box-title">日志</h5>
                  <div class="box-tools">
                    <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                    </button>
                  </div>
                </div>
                <div class="box-body no-padding">
                  <table class="table">
                    <tr>
                      <th>#</th>
                      <th>时间</th>
                      <th>类型</th>
                      <th>消息</th>
                    </tr>
                    <tr ng-repeat='log in projectLogs'>
                      <td>{{$index+1}}</td>

                      <td>{{log.time}}</td>
                      <td>{{log.type}}</td>
                      <td>{{log.message}}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>

            <!-- 状态 -->
            <div ng-show='type=="status"'>
              <div class="box">
                <div class="box-header">
                  <h5 class="box-title">状态</h5>
                  <div class="box-tools">
                    <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                    </button>
                  </div>
                </div>
                <div class="box-body no-padding">
                  <table class="table">
                    <tr ng-repeat='state in projectStates'>
                      <th>{{state.stateName}}</th>
                      <td>{{state.value}}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>

          </div>

          <!-- 项目配置 -->
          <div class="tab-pane" id="project-config" style="position: relative;" ng-controller="projectSetCtr">
            <form class="form-horizontal">
              <div class="box-body">

                <div class="form-group">
                  <div for="" class="text-center"><label style='font-size:15px'>基本配置</label></div>
                </div>

                <div class="form-group">
                  <label for="projectName" class="col-sm-2 control-label">项目名称</label>

                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="projectName" ng-model='project.name' placeholder="项目名称"></div>
                </div>
                <!-- 项目名称 -->

                <div class="form-group">
                  <label for="project_start_url" class="col-sm-2 control-label">start_url</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="project_start_url" ng-model='project.start_url' placeholder="start_url"></div>
                </div>
                <!-- start_url -->

                <div class="form-group">
                  <label for="project_depth" class="col-sm-2 control-label">采集深度</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="project_depth" ng-model='project.depth' placeholder="采集深度"></div>
                </div>
                <!-- 采集深度 -->

                <div class="form-group">
                  <div for="" class="text-center"><label style='font-size:15px'>参数配置</label></div>
                </div>

                <div class="form-group">
                  <label for="project_arguments_username" class="col-sm-2 control-label">用户名</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="project_arguments_username" ng-model='project.arguments.username' placeholder="用户名"></div>
                </div>
                <!-- 参数配置-用户名 -->

                <div class="form-group">
                  <label for="project_arguments_password" class="col-sm-2 control-label">密码</label>
                  <div class="col-sm-10">
                    <input type="text" class="form-control" id="project_arguments_password" ng-model='project.arguments.password' placeholder="密码"></div>
                </div>

                <div class="form-group">
                  <label for="selectTemplate" class="col-sm-2 control-label">选择模板</label>

                  <div class="col-sm-10">
                    <select multiple="multiple" class="form-control" id="selectTemplate" ng-model="project.templates" ng-options="m.name for m in templates" >
                      <option value="">-- 请选择 --</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" ng-show="project.templates.length">
                  <div class="col-sm-offset-2 col-sm-10">
                    <table class="table table-bordered">
                      <tbody>
                        <tr>
                          <th class="text-center">模板名称</th>
                          <th class="text-center">###</th>
                          <th class="text-center">调整优先级</th>
                          <th class="text-center">操作</th>
                        </tr>
                        <tr ng-repeat="template in project.templates">
                          <td class="text-center">{{template.name}}</td>
                          <td class="text-center">####</td>
                          <td class="text-center">
                            <span class="label label-info" ng-click="moveUp(template)">上移</span>
                            <span class="label label-info" ng-click="moveDown(template)">下移</span>
                          </td>
                          <td class="text-center">
                            <span class="label label-info" ng-click="showTemplate(template)">详情</span>
                            <span class="label label-danger" ng-click="deleteTemplate(template)">删除</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </form>

            <div class="box-footer text-center">
              <button type="submit" class="btn btn-info" ng-click="projectSetSave(project)"><i class='fa fa-save'></i> 保存</button>
            </div>
          </div>

          <!-- 模板列表 -->
          <div class="chart tab-pane" id="project-templates" style="position: relative;">
            模板列表
          </div>
        </div>
      </div>
      <!-- /.nav-tabs-custom -->
    </section>
  </div>
</section>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('statusChart'));

    // 指定图表的配置项和数据
    var option = {
      title: {
          text: '折线图'
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data:['发出请求','采集结果']
      },
      grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          <!-- data: ['0','1','2','3','4','5','6'] -->
          data: ['2016/12/24 00:00', '2016/12/24 04:00', '2016/12/24 08:00', '2016/12/24 12:00', '2016/12/24 16:00', '2016/12/24 20:00', '2016/12/25 00:00']
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name:'发出请求',
              type:'line',
              smooth: true,
              data:[0, 200, 400, 600, 700, 900, 1100]
          },
          {
              name:'采集结果',
              type:'line',
              smooth: true,
              data:[0, 302, 600, 900, 1000, 1200, 1400]
          }
      ]
  };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
